import { useEffect, useState } from "react";
import CommonModal from "@/components/CommonModal";
import { Form, message, Radio, Space } from "antd";
import { againcodegoodstrategyDetail, againcodegoodstrategyUpdate } from "../service";
import CommonInput from "@/pages/OrderModule/common/components/CommonInput";
import IconFont from "@/components/IconFont";
import BatchSuffixInput from "@/views/components/BatchSuffixInput";
import GoodsSelectModal from "@/pages/OrderModule/common/bizcomponents/GoodsSelectModal";
import BatchInputModal from "@/pages/OrderModule/common/components/BatchInputModal2";

/** 参与重匹配的商品范围  */
const GoodsRangeModal = ({ handleCancel }) => {
	const [isOk, setIsOk] = useState(false);
	const [open, setOpen] = useState(false);
	const [goodsSelectInfo, setGoodsSelectInfo] = useState({
		//新增商品弹窗
		type: "",
		name: "",
		visible: false,
		spuCodes: [],
		goodsCodes: [],
		notParticipateSpuCodes: [],
		notParticipateGoodsCodes: []
	});
	const [batchInfo, setBatchInfo] = useState({
		visible: false,
		label: "",
		name: ""
	}); //批量输入弹窗
	const [detailData, setDetailData] = useState({}); //详情数据

	const [form] = Form.useForm();

	const goodsRange = Form.useWatch("goodsRange", form);

	useEffect(() => {
		setOpen(true);
		getAgaincodegoodstrategyDetail();
	}, []);

	useEffect(() => {
		form.resetFields();
	}, [detailData]);

	//查询订单范围详情
	const getAgaincodegoodstrategyDetail = async () => {
		START_LOADING();
		const { success, data = {} } = await againcodegoodstrategyDetail();
		if (success) {
			setDetailData(data);
		}
		END_LOADING();
	};

	//保存配置信息
	const handleAgaincodegoodstrategyUpdate = async val => {
		START_LOADING();
		const { success, msg = "操作成功" } = await againcodegoodstrategyUpdate({
			...val,
			id: detailData.id
		});
		END_LOADING();
		if (success) {
			message.success(msg);
			setIsOk(true);
			setOpen(false);
		}
	};

	//打开商品弹窗
	const showModal = (name, type) => {
		setGoodsSelectInfo({
			...goodsSelectInfo,
			type,
			name,
			visible: true
		});
	};

	//选择商品
	const handleGoodsSelect = data => {
		setGoodsSelectInfo({
			...goodsSelectInfo,
			[goodsSelectInfo.name]: data,
			visible: false
		});
		const val = ["spuCodes", "notParticipateGoodsCodes"].includes(goodsSelectInfo.name)
			? data.map(v => v.spuCode)
			: data.map(v => v.skuCode);
		form.setFieldsValue({
			[goodsSelectInfo.name]: val.join()
		});
	};

	//点击确定
	const onOk = () => {
		form
			.validateFields()
			.then(val => {
				handleAgaincodegoodstrategyUpdate(val);
			})
			.catch(err => {
				console.log(err, "err");
			});
	};

	const onCancel = () => {
		setOpen(false);
	};

	const afterClose = () => {
		if (isOk) {
			handleCancel();
		} else {
			handleCancel();
		}
	};

	//批量输入弹窗
	const BatchInputModalProps = {
		...batchInfo,
		handleCancel() {
			setBatchInfo({
				...batchInfo,
				visible: false
			});
		},
		handleOk(val) {
			form.setFieldsValue({
				[batchInfo.name]: val
			});
			setBatchInfo({
				...batchInfo,
				visible: false
			});
		}
	};

	//选择商品组件
	const changeGoodsModalProps = {
		hiddenGoodNum: true,
		type: goodsSelectInfo.type,
		hiddenExtra: goodsSelectInfo.type == "NoNumberInput" ? true : false,
		submitCallback(changedArr) {
			handleGoodsSelect(changedArr);
		},
		handleCancel() {
			setGoodsSelectInfo({
				...goodsSelectInfo,
				visible: false
			});
		},
		setSelectedRows(data, rowKey) {
			return goodsSelectInfo[goodsSelectInfo.name].map(v => v[rowKey]) || [];
		}
	};

	return (
		<CommonModal title="参与重匹配的商品范围" afterClose={afterClose} open={open} width="600px" onOk={onOk} onCancel={onCancel}>
			<Form
				name="basic"
				onFinish={onOk}
				form={form}
				autoComplete="off"
				layout="horizontal"
				labelAlign="right"
				initialValues={{
					...detailData
				}}
			>
				<Form.Item name="goodsRange" label="商品范围：">
					<Radio.Group>
						<Radio value={1}>所有商品</Radio>
						<Radio value={2}>指定商品</Radio>
					</Radio.Group>
				</Form.Item>
				<Form.Item label="以下3个字段是“或”的关系" colon={false} noStyle />
				{goodsRange == 2 ? (
					<>
						<Form.Item name="goodsNames">
							<BatchSuffixInput
								clearable
								allowClear
								autoMultiLine
								modalProps={{
									title: "批量输入"
								}}
								maxItem={500}
								placeholder="请输入包含商品名称关键词，多个逗号隔开"
								message="分行输入内容，提交后主页面输入框会按照逗号自动隔开，点击查询可批量查询。"
								areaPlaceholder="每行输入1个内容，最多500个，例如:&#10;1272572508553111112223&#10;1272572512332111112226"
							/>
						</Form.Item>
						<Form.Item name="goodsCodes">
							<CommonInput
								placeholder="请输入指定商品编码，多个商品编码逗号隔开"
								suffix={
									<>
										<IconFont type="iconmodal-input" onClick={() => showModal("goodsCodes", "AccordingStyle")} />
										<IconFont
											type="icondirect-input"
											onClick={() => setBatchInfo({ visible: true, label: "商品编码", name: "goodsCodes" })}
										/>
									</>
								}
							/>
						</Form.Item>
						<Form.Item name="spuCodes">
							<CommonInput
								placeholder="请输入指定款式编码，多个款式编码逗号隔开"
								suffix={
									<>
										<IconFont type="iconmodal-input" onClick={() => showModal("spuCodes", "NoNumberInput")} />
										<IconFont
											type="icondirect-input"
											onClick={() => setBatchInfo({ visible: true, label: "款式编码", name: "spuCodes" })}
										/>
									</>
								}
							/>
						</Form.Item>
					</>
				) : (
					""
				)}
			</Form>
			{goodsSelectInfo.visible && <GoodsSelectModal {...changeGoodsModalProps} />}
			{batchInfo.visible && <BatchInputModal {...BatchInputModalProps} />}
		</CommonModal>
	);
};

export default GoodsRangeModal;
